<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>经典的两列布局一三行两列宽度固定布局</title>
        <style type="text/css">
        body{
             background: #fff;
             font:13px/1.5 Arial;
             margin: 0;
             padding: 0;
        }
        p{
            text-indent: 2em;
        }
        #header,#pagefooter,#container{
            margin: 0 auto;
            width: 760px;
        }
        .rounded{
            background:#888;
            width: 100%;
            border: #fff solid 1px; 
        }
        .rounded h2{
            background: #888;
            padding:20px 20px 10px 20px;
            margin: 0;
        }
        .rounded .main{
            padding:10px 20px;
            margin: -2em 0 0 0;
        }
        .rounded .rooter{
            background: #888;
        }

        .rounded .footer p{
            color:#fff;
            text-align:right;
            background:#888;
            display:block;
            padding:10px 20px 20px 20px;
            margin:-2em 0 0 0;
        }
        #container{
            position:relative;
        }
        #content{
            position:absolute;
            top:0;
            left:0;
            width: 500px;
        }
        #contert img{
            float:right;
        }
        #side{
            margin:0 0 0 500px;
        }
        </style>
        </head>
        <body>
            <div id="header">
                <div class="roundad">
                <h2>Header></h2>
                <div class="main"></div>
                <div class="footer">
                    <p>查看详细信息&gt;&gt;</p>
            </div>
        </div>
    </div>
              <div id="conttainer">
                  <div id="content">
                       <div class="rounded">
                            <div class="rounded">
                                <h2>mainBox</h2>
                                    <div class="main">
                                        <img src="images/cup.gif"width="128"hejght="128"/>
                                            <p>对于一个网页设计者来说，HTML语言一定不会.......</p>
                                            <p>对于一个网页设计者来说，HTML语言一定不会.......</p>
                                        </div>
                                     <div class="footer">
                                 <p>查看详细信息&gt;&gt;</p>
                             </div>
                         </div>
                   </div>
                         <div id="side">
                             <div calss="rounded">
                                 <h2>SideBox</h2>
                                 <div class="main">
                                     <p>对于一个网页设计者来说，HTML语言一定不会...........</p>
                                         <p>但是如果希望网页能够美观、大方，并升级......</p>
                                         </div>
                                         <div class="footer">
                                             <p>查看详细信息&gt;&gt;</p>
                                             </div>
                                        </div>
                                  </div>
                            </div>
                                <div id="pagefooter">
                                    <div class="rounded">
                                          <h2>Footer</h2>
                                             <div class="main">
                                                 <P>这是一行文本，这里作为样例，显示在布局框中。</P>
                                                      </div>
                                                         <div class="footer">
                                                              <p>查看详细信息&gt;&gt;</p>
                                                     </div>
                                                </div>
                                           </div>
                                       </body>
                                   </html>